<template>
 <div>
   <div id="Container">
     <div style="overflow:hidden;">
       <!-- 搜索-->
       <SearchCom></SearchCom>
     </div>
     <div id="tableDatas">
       <el-table
           :data="tableData"
           style="color: black; width: 100%;align-content: center;margin: 0px auto;margin-top: -7px; ">
         <el-table-column
             prop="id"
             label="编号"
             width="140">
         </el-table-column>
         <el-table-column
             prop="roleName"
             label="角色名称"
             width="140">
         </el-table-column>
         <el-table-column
             prop="createTime"
             label="创建时间"
             width="160"
         >
         </el-table-column>
         <el-table-column
             prop="updateTime"
             label="修改时间"
             width="160">
         </el-table-column>
       </el-table>
     </div>
     <div id="page">
       <!--      分页查询  :class="page_class"-->
       <el-pagination
           :page-sizes="[10, 20, 30, 40]"
           :page-size="pageSize"
           layout="total, sizes, prev, pager, next, jumper"
           :total="counts"
           :current-page.sync="page"
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
       ></el-pagination>
     </div>
   </div>
 </div>
</template>

<script>
import SearchCom from "@/components/SearchCom.vue";
import axios from "axios";

export default {
  name: "Roles",
  components: {SearchCom},
  data() {
    return {
      tableData: [],
      page: 1,
      pageSize: 10,
      counts: 0,
      name: '',
    }
  },
  methods: {
    likeName() {
      // console.log("绑定全局事件!")
      this.$bus.$on('likeRoles', (data) => {
        // console.log('我是likeEmployees组件,收到了数据',data)
        this.name = data;
        this.init();
      })
    },
    exportData(name){
      // debugger
      if(name===""){
        axios.get(`api/roles/RolesExport?name=${name}`).then((res) => {
          console.log(res);
          alert("导出成功!")
        }).catch(error => {
          console.log(error)
          return;
        })
      }else {
        axios.get(`api/roles/RolesExport?name=${name}`).then((res) => {
          console.log(res);
          alert("导出成功!")
        }).catch(error => {
          console.log(error)
          return;
        })
      }
    },
    exportRoles() {
      this.$bus.$on('exportDate', (data) => {
        this.name = data;
        console.log("name:",data);
        this.exportData(this.name);
      })
    },
    //显示的页数量
    handleSizeChange(val) {
      this.pageSize = val
      console.log("handleSizeChange===val", val);
      this.init()
    },
    //当前页第几页
    handleCurrentChange(val) {
      this.page = val;
      this.init()

    },
    init() {
      axios.get(`api/roles/RolesPage?page=${this.page}&pageSize=${this.pageSize}&name=${this.name}`).then((res) => {
        console.log(res.data.data.total);
        this.counts = res.data.data.total;
        this.tableData = res.data.data.records;
        console.log(this.counts);
      }).catch(error => {
        console.log(error)
        return;
      })
    }
  },
  mounted() {
    //全局事件绑定
    this.likeName();
    this.exportRoles();
    this.currentUser = this.user;
    this.init();
  },
  beforeDestroy() {
    //解绑事件,防止占用cpu
    this.$bus.$off('likeRoles')
    this.$bus.$off('exportDatas')
  },
}
</script>



<style scoped>
#Container {
  margin-left: 10px;
  margin-right: 10px;
  //width: 1600px;
  width: 100%;
  height: 500px;
  //background-color: steelblue;

}

#tableDatas {

  width: 100%;
}

.page_class {
  background-color: white;
}

#page {

  margin: 0.5px auto;
  //width: 92.2%;
  width: 100%;
  //float: right;
  //margin-right: 70px;
  background-color: white;
}
</style>
